<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px">
        <h1>智能球馆预约系统</h1>
        <div class="system-description">
          <p class="slogan">“智慧运动 · 触手可及”</p>
          <p class="features">
            <el-tag type="success" effect="dark">智能预约</el-tag>
            <el-tag type="primary" effect="dark">秒级响应</el-tag>
            <el-tag type="warning" effect="dark">数字管理</el-tag>
            <el-tag type="info" effect="dark">极致体验</el-tag>
          </p>
        </div>
        <p class="version-info">
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
      </el-col>

      <el-col :sm="24" :lg="12" style="padding-left: 50px">
        <div class="time-section">
          <!-- 显示当前时间 -->
          <div class="current-time">
            <div class="time">{{ currentTime }}</div>
            <div class="date">{{ currentDate }}</div>
          </div>

          <!-- 根据时间段动态显示 -->
          <div class="welcome-text">
            <span v-if="isMorning">🌅 早安，运动达人！开启活力满满的一天吧！</span>
            <span v-else-if="isAfternoon">🏸 午安，您今天的运动计划安排了吗？</span>
            <span v-else-if="isEvening">🌃 晚安，明日场地已开放预约</span>
          </div>
        </div>
      </el-col>


    </el-row>
    <el-divider/>

    <!-- 图表区域 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <div class="chart-container">
          <div ref="chartContainer" class="chart-wrapper"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <div ref="chartContainer1" class="chart-wrapper"></div>
        </div>
      </el-col>
    </el-row>
  </div>


</template>

<script>
import * as echarts from 'echarts';
import {statisticCourt , statisticMember} from '@/api/manager/statistics'


export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "1.0.0",

      currentTime: '',

      currentDate: '',

      courtSum: [],

      memberSum: [],

      chart: '',

      chart1: ''
    }
  },
  computed: {
    isMorning() {
      const hour = new Date().getHours();
      return hour >= 6 && hour < 12;
    },
    isAfternoon() {
      const hour = new Date().getHours();
      return hour >= 12 && hour < 18;
    },
    isEvening() {
      const hour = new Date().getHours();
      return hour >= 18 || hour < 6;
    }
  },
  methods: {
    updateTime() {
      const now = new Date();
      this.currentTime = now.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit', second: '2-digit'});
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
    },

    initChart() {
      // 确保 DOM 已经渲染
      console.log('DOM 渲染完成')

      this.$nextTick(() => {
        if (this.$refs.chartContainer) {
          // 销毁之前的图表实例
          if (this.chart) {
            this.chart.dispose();
          }

          // 初始化图表
          this.chart = echarts.init(this.$refs.chartContainer);

          const option = {
            title: {
              text: '场馆数量'
            },
            xAxis: {
              type: 'category',
              data: '',
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: '',
                type: 'bar'
              }
            ]
          };
          // 设置图表配置
          this.chart.setOption(option);
        }
      });

      this.$nextTick(() => {
        if (this.$refs.chartContainer1) {
          // 销毁之前的图表实例
          if (this.chart1) {
            this.chart1.dispose();
          }
          // 初始化图表
          this.chart1 = echarts.init(this.$refs.chartContainer1);

          const maleMembers = 1048;
          const femaleMembers = 735;
          const totalMembers = maleMembers + femaleMembers;

          const option = {
            title: {
              text: '会员统计',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              top: '5%',
              left: 'center'
            },
            series: [
              {
                name: '会员统计',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                  borderRadius: 10,
                  borderColor: '#fff',
                  borderWidth: 2
                },
                label: {
                  show: true,
                },
                emphasis: {
                  label: {
                    show: true,
                    fontSize: 20,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: true
                },
                data: [
                  { value: maleMembers, name: '男性会员' },
                  { value: femaleMembers, name: '女性会员' },
                ]
              }
            ],

            graphic: {
              elements: [{
                type: 'text',
                key: 'total',
                z: 100,
                draggable: false,
                shape: {
                  r: 5
                },
                keyframeAnimation: {
                  duration: 1000
                },
                style: {
                  text: `${totalMembers}`,
                  fontSize: 30,
                  fontWeight: 'bold',
                  textAlign: 'center',
                  verticalAlign: 'middle',
                  fill: '#333'
                },
                left: 'center',
                top: '45%'
              },
                {
                  type: 'text',
                  key: 'totalLabel',
                  z: 100,
                  draggable: false,
                  shape: {
                    r: 5
                  },
                  keyframeAnimation: {
                    duration: 1000
                  },
                  style: {
                    text: '总会员数',
                    fontSize: 16,
                    fontWeight: 'normal',
                    textAlign: 'center',
                    verticalAlign: 'middle',
                    fill: '#666'
                  },
                  left: 'center',
                  top: '35%'
                }]
            }


          };
          // 设置图表配置
          this.chart1.setOption(option);
        }
      });

    },

    getCourtSum() {
      console.log('查询场馆数量')
      statisticCourt().then(res => {
        this.courtSum = res.data
        console.log(this.courtSum)
        this.updateChart();

      }).catch(err => {
        console.log(err)
      })
    },

    updateChart() {
      if (!this.chart || !this.courtSum.length) return;

      const option = {
        title: { text: '场馆数量' },
        xAxis: {
          type: 'category',
          data: this.courtSum.map(item => item.place_type)
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.courtSum.map(item => item.count),
          type: 'bar'
        }]
      };
      this.chart.setOption(option, true);
    },

    getMemberSum() {
      console.log('查询会员数量')
       statisticMember().then(res => {
        this.memberSum = res.data
        console.log(this.memberSum)
        this.updateMemberChart();

      }).catch(err => {
        console.log(err)
      })
    },

    updateMemberChart(){
      if (!this.chart || !this.memberSum.length) return;

      const maleMembers = this.memberSum[0].count;
      const femaleMembers = this.memberSum[1].count;
      const otherMembers = this.memberSum[2].count;

      const totalMembers = maleMembers + femaleMembers + otherMembers;

      const option = {
        title: {
          text: '会员统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '会员统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true
            },
            data: [
              { value: maleMembers , name: '男性会员' },
              { value: femaleMembers , name: '女性会员' },
              { value: otherMembers, name: '其他会员' }
            ]
          }
        ],

        graphic: {
          elements: [{
            type: 'text',
            key: 'total',
            z: 100,
            draggable: false,
            shape: {
              r: 5
            },
            keyframeAnimation: {
              duration: 1000
            },
            style: {
              text: `${totalMembers}`,
              fontSize: 30,
              fontWeight: 'bold',
              textAlign: 'center',
              verticalAlign: 'middle',
              fill: '#333'
            },
            left: 'center',
            top: '45%'
          },
            {
              type: 'text',
              key: 'totalLabel',
              z: 100,
              draggable: false,
              shape: {
                r: 5
              },
              keyframeAnimation: {
                duration: 1000
              },
              style: {
                text: '总会员数',
                fontSize: 16,
                fontWeight: 'normal',
                textAlign: 'center',
                verticalAlign: 'middle',
                fill: '#666'
              },
              left: 'center',
              top: '35%'
            }]
        }

      };
      this.chart1.setOption(option, true);
    }

  },

  mounted() {
    this.updateTime();
    setInterval(this.updateTime, 1000);
    //调用查询函数 返回图表数据
    // 查询场馆名称与数量
    this.getCourtSum();

    this.getMemberSum();

    // 初始化图表
    this.initChart();

    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', () => {
      if (this.chart) {
        this.chart.resize();
      }
    });

  },
  beforeDestroy() {
    // 销毁图表实例，防止内存泄漏
    if (this.chart) {
      this.chart.dispose();
    }

    clearInterval(this.timeInterval);
  }

}
</script>

<style scoped lang="scss">
.home {
  .w {
    font-size: 20px;
    font-weight: bold;
  }
}

.system-description {
  margin: 15px 0;

  .slogan {
    font-size: 18px;
    color: #409EFF;
    font-weight: 500;
    margin-bottom: 15px;
    text-align: center;
  }

  .features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 10px;

    .el-tag {
      margin: 5px;
    }
  }
}

.version-info {
  margin-top: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  text-align: center;
}

.time-section {
  text-align: center;
  padding: 20px;
  height: 195px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  color: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

  .current-time {
    margin-bottom: 20px;

    .time {
      font-size: 32px;
      font-weight: bold;
      font-family: 'Courier New', monospace;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    }

    .date {
      font-size: 16px;
      margin-top: 8px;
      opacity: 0.9;
    }
  }

  .welcome-text {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(5px);
  }
}

.chart-container {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  h3 {
    margin-top: 0;
    color: #333;
  }

  .chart-wrapper {
    width: 100%;
    height: 400px;
  }
}

</style>

